<template>
	<div class="in-wrap">
		<div class="nxb-box">
			<form method="post" id="addPaperRecord"> <input type="hidden" id="sign" value="6f188ffb169a61d5f652598a929f074d"> <input type="hidden" id="testTime" value=""> <input type="hidden" value="276" id="paperId"> <input type="hidden" value="686" id="paperRecordId"> <input type="hidden" value="527" id="planId">
				<div class="e-main" style="min-height: 936px;">
					<div class="container">
						<div class=" clearfix e-test-box">
							<div class="e-test-fixed ">
								<div id="p-test-box" class="p-test-box1" style="position: fixed;">
									
									<div class="mt20">
										<dl class="paper-test q-card-box q-card-wrap"> <dt> <a href="javascript:;"> <span class="ques-card">答题卡</span> <em class="q-card-icon icon16"></em> </a> </dt>
											<dd class="style-2">
												<div class="ques-card-tab clearfix">

													<span class="fl"  :class="item.question.status?'record-answer-correct':'record-answer-error'" v-for="(item,index) in questionRecords">
														<a href="javascript:;" :title="'第'+ (index+1) +'题'"  @click="findExam(item.question)"  style="color: #fff;"> {{index+1}}</a>
													</span>

												</div>
											</dd>
										</dl>
									</div>
								</div>
							</div>
							<div>
								
								<div class="t-p-sub-title-wrap">
									<div class="t-p-sub-title">
										<ul class="clearfix">
											<li v-for="item in paperTypeList" :class="examType == item.type?'current':''">
												<a class="titleHeiddenAndShow0" href="javascript:void(0)" :title="item.name" @click="changExamType(item)">
													<strong>{{item.name}}</strong>
													<span></span>
												</a>
											</li>

										</ul>
									</div>
								</div>
								<div class="clear"></div>

								<div class="p-ques-list">
									<ul>

										<li class="p-q-item" v-for="(item,index) in paperList" v-show="examType == item.type">
											<div class="pt10 pb10 pl10 pr10">
												<h6 class="hLh30 of unFw " v-show="item.type == '1'">
														<font class="c-333 fsize12" id="showTitleValue">每题有且只有1个正确答案[&nbsp;每小题{{item.score}}分&nbsp;]</font>
													</h6>
											</div>
											<div class="pt10 pb10 pl10 pr10" v-show="item.type == '2'">
												<h6 class="hLh30 of unFw ">
														<font class="c-333 fsize12" id="showTitleValue">每题至少1个正确选项[ 每小题{{item.score}}分 ]</font>
													</h6>
											</div>
											<div class="pt10 pb10 pl10 pr10" v-show="item.type == '3'">
												<h6 class="hLh30 of unFw ">
														<font class="c-333 fsize12" id="showTitleValue">判断对错[ 每小题{{item.score}}分 ]</font>
													</h6>
											</div>
											<div class="pt10 pb10 pl10 pr10" v-show="item.type == '4'">
												<h6 class="hLh30 of unFw ">
														<font class="c-333 fsize12" id="showTitleValue">阅读题干，填写问题[ 每小题{{item.score}}分 ]</font>
													</h6>
											</div>
											<div class="pt10 pb10 pl10 pr10" v-show="item.type == '5'">
												<h6 class="hLh30 of unFw ">
														<font class="c-333 fsize12" id="showTitleValue">阅读题干，填写问题[ 每小题{{item.score}}分 ]</font>
													</h6>
											</div>

											<article class="datikaQstAnchor1 t-paper-one t-paper-check-box" v-if="item.type == '1'" v-for="childItem in item.questionList" :ref="childItem.id">

												<div class="clearfix p-ques-title">
													<tt class="fl">{{childItem.paperNum}}</tt>

													<span class="c-333 fsize16 fl" v-html="childItem.info"></span>
												</div>
												<section class="t-p-options">
													<ol>
														<li v-for="optItem in childItem.optionList" >
															<a href="javascript:void(0);" :style="optItem.name == childItem.correct?'color:#31a4ff':''">{{optItem.name}}、<span v-html="optItem.info"></span></a>
														</li>

													</ol>
												</section>
												<section class="clearfix mt20 pl15">
													<p class="fl fsize14 pr15 ">正确答案：<span class="c-blue">{{childItem.correct}}</span></p>
													<p class="fl fsize14 pr15">您的答案是：<span class="c-red">{{childItem.answer?childItem.answer:'无'}}</span></p>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)==-1" @click="lookAnalysis(childItem)"> <span class="ques-card">查看解析</span> <em class="jx-icon icon16"></em> </a>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)!=-1" @click="hideQuestionId(childItem.id)"> <span class="ques-card">收起解析</span> <em class="ana-sq icon16"></em> </a>
													
												</section>
												<section class="clearfix mt20 pl15" v-show="nowQuestionId.indexOf(childItem.id)!=-1">
													<p  class="c-666">
														<em class="ans-lys icon24"></em><span>题目解析：</span>
													</p>
													<div v-html="childItem.analysis" class="mt10"></div>
												</section>
											</article>

											<article class="datikaQstAnchor31 t-paper-one t-paper-check-box" v-if="item.type == '2'" v-for="childItem in item.questionList" :ref="childItem.id">
												<div class="clearfix p-ques-title">
													<tt class="fl">{{childItem.paperNum}}</tt>

													<span class="c-333 fsize16 fl" v-html="childItem.info"></span>
												</div>
												<section class="t-p-options">
													<ol>
														<li v-for="optItem in childItem.optionList">
															<a href="javascript:void(0);" :style="childItem.correct.indexOf(optItem.name)!=-1?'color:#31a4ff':''">{{optItem.name}}、<span v-html="optItem.info"></span></a>
														</li>

													</ol>
												</section>
												<section class="clearfix mt20 pl15">
													<p class="fl fsize14 pr15 ">正确答案：<span class="c-blue">{{childItem.correct}}</span></p>
													<p class="fl fsize14 pr15">您的答案是：<span class="c-red">{{childItem.answer?childItem.answer:'无'}}</span></p>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)==-1" @click="lookAnalysis(childItem)"> <span class="ques-card">查看解析</span> <em class="jx-icon icon16"></em> </a>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)!=-1" @click="hideQuestionId(childItem.id)"> <span class="ques-card">收起解析</span> <em class="ana-sq icon16"></em> </a>
													
												</section>
												<section class="clearfix mt20 pl15" v-show="nowQuestionId.indexOf(childItem.id)!=-1">
													<p  class="c-666">
														<em class="ans-lys icon24"></em><span>题目解析：</span>
													</p>
													<div v-html="childItem.analysis" class="mt10"></div>
												</section>
											</article>

											<article class="datikaQstAnchor31 t-paper-one t-paper-check-box" v-if="item.type == '3'" v-for="childItem in item.questionList" :ref="childItem.id">
												<div class="clearfix p-ques-title">
													<tt class="fl">{{childItem.paperNum}}</tt>

													<span class="c-333 fsize16 fl" v-html="childItem.info"></span>
												</div>
												<section class="t-p-options">
													<ol>
														<li>
															<a href="javascript:void(0);" :style="'T' == childItem.correct?'color:#31a4ff':''">正确</a>
														</li>
														<li>
															<a href="javascript:void(0);" :style="'F' == childItem.correct?'color:#31a4ff':''">错误</a>
														</li>

													</ol>
												</section>
												
												<section class="clearfix mt20 pl15">
													<p class="fl fsize14 pr15 ">正确答案：<span class="c-blue">{{childItem.correct == 'T'?'正确':'错误'}}</span></p>
													<p class="fl fsize14 pr15">您的答案是：<span class="c-red">{{childItem.answer == 'true'?'正确':'错误'}}</span></p>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)==-1" @click="lookAnalysis(childItem)"> <span class="ques-card">查看解析</span> <em class="jx-icon icon16"></em> </a>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)!=-1" @click="hideQuestionId(childItem.id)"> <span class="ques-card">收起解析</span> <em class="ana-sq icon16"></em> </a>
													
												</section>
												<section class="clearfix mt20 pl15" v-show="nowQuestionId.indexOf(childItem.id)!=-1">
													<p  class="c-666">
														<em class="ans-lys icon24"></em><span>题目解析：</span>
													</p>
													<div v-html="childItem.analysis" class="mt10"></div>
												</section>
											</article>

											<article class="t-paper-one t-paper-check-box" v-if="item.type == '4'" v-for="childItem in item.questionList" :ref="childItem.id">
												<div class="clearfix p-ques-title">
													<tt class="fl">{{childItem.paperNum}}</tt>
													<span class="c-333 fsize16 fl" v-html="childItem.info"></span>
												</div>

												<section class="ques-tk-wrap" v-for="(optItem, optIndex) in getCompletionOpt(childItem.correct)" v-if="childItem.correct">
													<p>
														<span style="width: 30%;">答案{{optIndex+1}}：</span><el-input :value="optItem" :disabled="true" style="width: 70%;"></el-input>
													</p>
													
													
												</section>
												<section class="clearfix mt20 pl15">
												
													<p class="fl fsize14 pr15">您的答案是：
														
														<span   class="c-red pl10" v-for="(optItem, optIndex) in getCompletionOpt(childItem.answer)">答案{{optIndex+1}}:   {{optItem}}</span>
														<span  class="c-red pl10" v-show="!childItem.answer">无</span>
													</p>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)==-1" @click="lookAnalysis(childItem)"> <span class="ques-card">查看解析</span> <em class="jx-icon icon16"></em> </a>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)!=-1" @click="hideQuestionId(childItem.id)"> <span class="ques-card">收起解析</span> <em class="ana-sq icon16"></em> </a>
													
												</section>
												<section class="clearfix mt20 pl15" v-show="nowQuestionId.indexOf(childItem.id)!=-1">
													<p  class="c-666">
														<em class="ans-lys icon24"></em><span>题目解析：</span>
													</p>
													<div v-html="childItem.analysis" class="mt10"></div>
												</section>
											</article>

											<article class="datikaQstAnchor46 t-paper-one t-paper-check-box" v-if="item.type == '5'" v-for="childItem in item.questionList" :ref="childItem.id">
												<div class="clearfix p-ques-title">
													<tt class="fl">{{childItem.paperNum}}</tt>

													<span class="fl c-333 fsize16" v-html="childItem.info"></span>
												</div>
												<div class="textarea-box">
													<span class="c-666 fsize14 mt20 pl15">材料题无答案，请查看解析</span>
												</div>
												<section class="clearfix mt20 pl15">
													
													<p class="fl fsize14 pr15">您的答案是：<span class="c-red">{{childItem.answer?childItem.answer:'无'}}</span></p>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)==-1" @click="lookAnalysis(childItem)"> <span class="ques-card">查看解析</span> <em class="jx-icon icon16"></em> </a>
													<a href="javascript:;" class="q-car-wrap fr c-666" v-show="nowQuestionId.indexOf(childItem.id)!=-1" @click="hideQuestionId(childItem.id)"> <span class="ques-card">收起解析</span> <em class="ana-sq icon16"></em> </a>
													
												</section>
												<section class="clearfix mt20 pl15" v-show="nowQuestionId.indexOf(childItem.id)!=-1">
													<p  class="c-666">
														<em class="ans-lys icon24"></em><span>题目解析：</span>
													</p>
													<div v-html="childItem.analysis" class="mt10"></div>
												</section>
											</article>

											<section class="page-bar" v-show="index<paperList.length-1">
												<span class="comm-btn-wrap"><a href="javascript:;" title="点击进入下一部分" class="comm-btn c-btn-1" @click="nextPaper">下一部分</a></span>
											</section>
										</li>

									</ul>

								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
			<div>
				<nav class="global-nav exam-navbox">
					<ul class="clearfix">
						<li>
							<a class="bor-right" href="javascript:;"> <em class=" clock-icon vam"></em> <span class="vam examTimerShow">28分46秒</span> </a>
						</li>
						<li>
							<a class="bor-right" onclick="formSubmit()" href="javascript:;"> <em class="mr5 paper-sub-icon vam"></em> <span class="fsize16 c-333 vam">提交</span> </a>
						</li>
						<li id="gn-ul">
							<a id="learn-history" href="javascript:;"> <em class="icon16 mr10 answer-card"></em> <span class="fsize16 c-333 vam">答题卡</span> </a>
						</li>
					</ul>
				</nav>

			</div>

		</div>
	</div>
</template>

<script>
	import { getExamRecord } from '@/api/exam'
	export default {

		name: 'examRecord',
		data() {

			return {
				paperTypeList: [], //试题类型
				paperList: [], //试题数组
				examType: '',
				questionRecords: [], //答案数组
				nowQuestionId:[]//查看解析
				
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getStorageInfo;
			}
		},
		created() {
			let query = this.$route.query;
			let data = {
				examRecordId:query.examRecordId,
				paperId:query.paperId,
				status:true
			};
			this.getExamRecord(data);
		},
		methods: {
			ScrollTop(number = 0, time) { //点击答题卡滚动动画

				if(!time) {
					document.body.scrollTop = document.documentElement.scrollTop = number;
					return number;
				}
				const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
				let spacingInex = time / spacingTime; //计算循环的次数
				let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
				let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
				let scrollTimer = setInterval(() => {
					if(spacingInex > 0) {
						spacingInex--;
						this.ScrollTop(nowTop += everTop);
					} else {
						clearInterval(scrollTimer); // 清除计时器
					}
				}, spacingTime);

			},

			getExamRecord(data) { //获取试卷 type,考试形式 ，用于创建考试记录接口
				getExamRecord(data).then((res) => {
					let data = res.entity;
					var paperNum = 0;
					this.paperName = data.name;
					this.time = data.time;
					data.forEach((item) => {
						this.paperTypeList.push({
							"name": item.name,
							"type": item.type
						});
						for(let i = 0; i < item.questionList.length; i++) {
							if(item.questionList) {
								paperNum += 1;
								item.questionList[i]["paperNum"] = paperNum;
								let questionData = {
									answer: '',
									score: item.score,
									question: item.questionList[i]
								};
								if(item.type == 2 || item.type == 4) {
									questionData.answer = [];
								};
								this.questionRecords.push(questionData);

							}
						}
					});
					this.paperList = data;
					this.examType = this.paperTypeList[0].type;
				})
			},
			changExamType(val) { //切换试题类型

				this.examType = val.type;
			},
			nextPaper() { //点击下一部分
				let nextType = this.findNextExam(this.examType);
				this.examType = nextType;
			},
			getCompletionOpt(val) { //填空题根据答案显示多少个选项
				let correctArry = [];
				if(val){
					let correctArry = val.split(';');	
				};
				
				return correctArry;
			},
			getCompletion(arry){//填空题形式
				let postStr = '';
 				arry.forEach((item)=>{
 					postStr+=';'+item;
	 			});
	 			postStr = postStr.substr(1);
	 			return postStr;
			},
			findExam(val) { //点击答题卡寻找试题
				this.examType = val.type;
				let examId = val.id;
				let elementObj = this.$refs[examId][0];
				let that = this;
				setTimeout(function() {
					that.ScrollTop(elementObj.offsetTop, 200);
				}, 100); //解决元素为display:none时获取offsetTop为0

			},
			findNextExam(type) { //获取下一部分值
				let length = this.paperTypeList.length;
				for(let i = 0; i < length; i++) {
					if(type == this.paperTypeList[i].type) {
						return this.paperTypeList[i + 1].type;
					}
				}
			},
			lookAnalysis(data) {
				this.nowQuestionId.push(data.id);
				
			},
			hideQuestionId(id) {
				this.nowQuestionId.splice(this.nowQuestionId.indexOf(id), 1);
			},
		}
			
}
</script>

<style scoped lang="scss">
	@import '../../assets/style/examing-style'
</style>